<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<meta charset="utf-8" />
<title>ECharts</title>

<%@ include file="/common/pre/header.jsp"%>

<!-- 引入 echarts.js -->
<script src="<%=basePath%>js/echarts.min.js"></script>
<script src="<%=basePath%>js/ecStat.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.8.3.js"
	charset="utf-8"></script>
	
	<!-- 弹窗 -->
<script
	src="https://cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.js"></script>
<link rel="stylesheet"
	href="https://cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.css">
	<style type="">
	
	#findFaultRoom{margin-top: -25px;}

	
	</style>
	
</head>
<body>
	<c:if test="${user == null}">
		<c:redirect url="login.jsp"></c:redirect>
	</c:if>
		
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div>

		<form  id="findFaultRoom">
			<table >
				<tr >
				
					<td>
					<c:if test="${user.roName =='管理员'}">
									
								</c:if>
						所属机房&nbsp;&nbsp;&nbsp;&nbsp;<select name="computerroomId" id="computerroomId" onchange="cRoomChange()">
	
									<option value="0" selected="selected">請选择</option>
						
								<c:forEach items="${computerroomList}" var="desc">
									<option value="${desc.id}">${desc.computerroomName}</option>
				
								</c:forEach>
							</select>
					</td>
					<td>
						所属班级&nbsp;&nbsp;&nbsp;&nbsp;<select name="classroomId" id="classroomId" onchange="cClassChange()">
	
									<option value="0" selected="selected">請选择</option>
						
								<c:forEach items="${classroomInfo}" var="desc">
									<option value="${desc.id}">${desc.className}</option>
				
								</c:forEach>
							</select>
					</td>
					<td>开始时间&nbsp;&nbsp;&nbsp;&nbsp;<input type="date" name='startDate' /> </td>&nbsp;&nbsp;
					<td>结束时间&nbsp;&nbsp;&nbsp;&nbsp;<input type="date"name='endDate' onchange="time_change()" /> </td>
					<td><input type="button" value="查看" class="s_btn" onclick="sub_form()" /></td>
				</tr>
			
			
			
			
			</table>
		</form>

	</div>

	<div id="main" style="width: 840px; height: 430px;"></div>


	<script type="text/javascript">
	
	
	//机房选项改变
	function cRoomChange(){
		
		$("#classroomId option:eq(0)").attr("selected",true);
		
	}
	//班级选项改变
	function cClassChange(){
		
		$("#computerroomId option:eq(0)").attr("selected",true);
	}
	
		var datas = [         
		             <c:forEach items="${countMap}" var="demp"> 
			         
		             	${demp.value},
					
					</c:forEach> 
		             ];
	
	
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据

		var option = {
			color : [ '#3398DB' ],
			title : {
		        text: '待维修设备统计',
		        x:'center'
		    },
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
		    toolbox: {
		        feature: {
		            dataView: {show: true, readOnly: false},
		            
		            saveAsImage: {show: true}
		        }
		    },
			grid : {
			
				left : '9%',
				right : '4%',
				bottom : '5%',
				containLabel : false
			},
			xAxis : [ {
				type : 'category',
				data : [<c:forEach items="${faultInfo1}" var="demp"> 
		         
		        	'${demp.faultName}',
				
				</c:forEach> ],
				axisTick : {
					alignWithLabel : true
				}
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
				name : '损坏数量',
				type : 'bar',
				barWidth : '50%',
				data : datas
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
		
		
		function time_change(){
			
			
		}
		
		
		function sub_form(){

			$.getJSON("/1and5Demo/FaultController/findFaultRoom2",$("#findFaultRoom").serialize(),function(result){
			
				datas = result
				
				if(datas["mess"] == undefined){
					
					
				
				
				// 基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.getElementById('main'));
				var option = {
						color : [ '#3398DB' ],
						title : {
					        text: '设备损坏统计',
					        x:'center'
					    },
						tooltip : {
							trigger : 'axis',
							axisPointer : { // 坐标轴指示器，坐标轴触发有效
								type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							}
						},
					    toolbox: {
					        feature: {
					            dataView: {show: true, readOnly: false},
					          
					            saveAsImage: {show: true}
					        }
					    },
						grid : {
							left : '9%',
							right : '4%',
							bottom : '5%',
							containLabel : false
						},
						xAxis : [ {
							type : 'category',
							data : [ 
									<c:forEach items="${faultInfo1}" var="demp"> 
							         
							        	'${demp.faultName}',
									
									</c:forEach>
									],
							axisTick : {
								alignWithLabel : true
							}
						} ],
						yAxis : [ {
							type : 'value'
						} ],
						series : [ {
							name : '损坏数量',
							type : 'bar',
							barWidth : '50%',
							data : datas
						} ]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}else{
					
					swal('Oops...', '数据有误', 'error');
				}
	        });
			
		}
		
		
	</script>
</body>
</html>